<template>
  <div class="menu-container">
    <van-nav-bar :title="$t('h.menuPage.pageTitle')" style="background: #ededed">
      <template #left>
        <van-icon name="search" size="24" color="#3d3d3d" @click="$router.push({ name: 'search' })" />
      </template>
    </van-nav-bar>

    <!-- 商家信息 -->
    <div class="shops">
      <div class="shops-item">
        <van-card :desc="initShopsItem.description" :title="initShopsItem.name" :thumb="initShopsItem.picture_url">
          <template #tags>
            <van-tag type="warning" v-show="shopsConfig.takeaway">{{ $t('h.shopsPage.delivery') }}</van-tag>
            <van-tag type="success">{{ $t('h.shopsPage.pickUp') }}</van-tag>
            <van-tag plain type="primary">1km</van-tag>
          </template>
          <template #footer>
            <div class="time">
              <span>{{ $t('h.menuPage.doTime') }}</span>
              <span>{{ initShopsItem.open_time }}AM - {{ initShopsItem.close_time }}PM</span>
            </div>
            <div class="address">
              <span>{{ $t('h.menuPage.address') }}</span>
              <li>{{ initShopsItem.address1 }}{{ initShopsItem.address2 }}</li>
            </div>
          </template>
        </van-card>
      </div>
    </div>

    <!-- 商品菜单 -->
    <div class="menu-list" v-if="showMenu">
      <div class="menu-box">
        <div class="menu-item">
          <van-sidebar v-model="menuKey" ref="cateScroll">
            <van-sidebar-item v-for="item in initMenuList" :key="item.id" :title="item.name" @click="menuId = item.id" />
          </van-sidebar>
        </div>
        <div class="goods-box" ref="goodsScroll">
          <div class="goods-box-head">
            <span>{{ initMenuList[menuKey].name }}</span>
          </div>
          <div class="goods-box-item" v-for="item in goodsList" :key="item.id">
            <van-card
              :price="item.discount_amount > 0 ? item.price - item.discount_amount + '.00' : item.price + '.00'"
              :desc="$t('h.menuPage.stock') + item.stock"
              :title="item.name"
              :tag="item.discount_amount > 0 ? $t('h.menuPage.discount') : ''"
              currency="$"
              @click="selectGoods(item)"
              :thumb="item.image_thumbnail_cdn ? item.image_thumbnail_cdn : localImg"
              :style="{ opacity: item.stock <= 0 ? '0.6' : '' }"
            >
              <template #tags>
                <span class="old-price" v-show="item.discount_amount > 0">${{ item.price }}</span>
                <Count :goodsItem="item" :combo="item.id === comboData.id ? comboData : null"></Count>
              </template>
            </van-card>
          </div>
        </div>
      </div>
    </div>

    <Cart></Cart>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Vue from 'vue'
// 系统错误捕获
const errorHandler = (error, vm) => {
  console.error('抛出全局异常')
  console.error(vm)
  console.error(error)
}

Vue.config.errorHandler = errorHandler

export default {
  name: 'Menu',
  data() {
    return {
      showMenu: false,
      menuKey: 0,
      menuId: 0,
      comboData: {}, // 加入购物车的套餐数据
      localImg: 'static/img/mxbc/Ice_Cream/Purple_Potato_Latte.jpeg'
    }
  },
  created() {
    this.checkLocation()
    var scroll = this.menuScroll
    if (scroll.key !== undefined) {
      this.menuKey = scroll.key
    }
  },
  mounted() {
    // init default category title
    if (this.initMenuList) {
      var defMenu = this.initMenuList[this.menuKey]
      this.menuId = defMenu.id
      this.showMenu = true
    }
  },
  // 组件激活获取滚动数据
  activated() {
    this.lastScroll()
  },
  // 组件失活清除套餐数据
  deactivated() {
    this.comboData = {}
  },
  // 获取滚动数据
  updated() {
    this.lastScroll()
    this.$refs.cateScroll.$el.addEventListener('scroll', this.elScroll)
    this.$refs.goodsScroll.addEventListener('scroll', this.elScroll)
  },
  watch: {
    // 监听路由携带的选择的套餐数据
    $route: {
      handler({ params }) {
        // console.log(params)
        if (params.id) return (this.comboData = params)
      }
    },
    // 保存菜单选择位置
    menuKey(key) {
      this.$store.commit('saveMenuScroll', { key })
    }
  },
  computed: {
    // init get goods category data & shops data & more
    ...mapState({
      initGoodsList: state => state.home.shopsGoods,
      initMenuList: state => state.home.shopsMenu.category,
      initShopsItem: state => state.home.shopsItem,
      shoppingCart: state => state.home.shoppingCart,
      shopsConfig: state => state.home.shopsConfig,
      menuScroll: state => state.home.menuScroll,
      location: state => state.home.location,
      changeLocation: state => state.home.changeLocation,
      positionMode: state => state.home.positionMode
    }),
    // 计算商品匹配 category 菜单
    goodsList() {
      return this.initGoodsList.filter(item => {
        return item.category_id === this.menuId
      })
    }
  },
  methods: {
    // view current goods detail
    selectGoods(item) {
      if (item.stock < 1) return this.$msg.warning('该商品已售罄')
      this.$router.push({ name: 'detail', query: { id: item.id, source: 1 } })
    },
    // 恢复元素滚动条位置
    lastScroll() {
      var cate = this.$refs.cateScroll
      var goods = this.$refs.goodsScroll
      var scroll = this.menuScroll
      if (scroll !== {}) {
        if (cate || goods) {
          cate.$el.scrollTop = scroll.cate
          goods.scrollTop = scroll.goods
        }
      }
    },
    // 获取元素滚动数据
    elScroll() {
      var cate = this.$refs.cateScroll
      var goods = this.$refs.goodsScroll
      if (cate || goods) {
        var cateScroll = cate.$el.scrollTop
        var goodsScroll = goods.scrollTop
      }
      var data = {
        cate: cateScroll,
        goods: goodsScroll,
        key: this.menuKey
      }
      this.$store.commit('saveMenuScroll', data)
    },
    // 识别定位是否匹配
    checkLocation() {
      var mode = this.positionMode
      if (!mode) return

      var currentCity = this.location.location.city
      var city = this.changeLocation.location.cityname
      if (currentCity !== city) {
        return this.$msg.toast('当前地址不在配送范围内', 'top')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.menu-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}

.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}

.shops {
  position: relative;
  display: flex;
  justify-content: center;
  top: 46px;
  width: 100%;
  max-width: 640px;
  z-index: 2;
  background-color: #ededed;
  .shops-item {
    width: 97%;
    .van-card {
      overflow: hidden;
      height: 150px;
      border-radius: 9px;
      background-color: white;
      .van-card__header {
        width: 100%;
        .van-card__title {
          font-size: 1.4em;
        }
        .van-card__desc {
          font-size: 1.1em;
          color: #ababab;
        }
        .van-tag--warning {
          position: relative;
          top: 33px;
          padding: 1px 6px;
          background-color: #ffbf05;
          border-radius: 3px;
        }
        .van-tag--success {
          position: relative;
          top: 33px;
          left: 0.33em;
          padding: 1px 6px;
          border-radius: 3px;
          background-color: #3cb371;
        }
        .van-tag--primary {
          position: absolute;
          right: 0;
          bottom: 0;
          padding: 1px 6px;
          border-radius: 9px;
          color: #b8b8b8;
        }
      }
      .van-card__footer {
        .time {
          position: absolute;
          display: flex;
          align-items: center;
          width: 90%;
          top: 8.1em;
          font-size: 1em;
          span:nth-child(1) {
            height: 20px;
            line-height: 20px;
            font-weight: 600;
          }
          span:nth-child(2) {
            color: #878787;
          }
        }
        .address {
          position: absolute;
          display: flex;
          align-items: center;
          width: 90%;
          top: 9.4em;
          font-size: 1em;
          text-align: left;
          span:nth-child(1) {
            white-space: nowrap;
            height: 20px;
            line-height: 20px;
            font-weight: 600;
          }
          li:nth-child(2) {
            color: #878787;
          }
        }
      }
    }
  }
}

.menu-list {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  top: 46px;
  width: 100%;
  height: 100%;
  margin-top: 6px;
  background-color: #ebebeb;
  .menu-box {
    position: relative;
    display: flex;
    overflow: hidden;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    width: 97%;
    height: 100%;
    .menu-item {
      width: 30%;
      height: 100%;
      border-right: 0.06em solid #ebebeb;
      overflow: auto;
      background-color: white;
      .van-sidebar {
        width: 100%;
        height: 100%;
        padding-bottom: 120px;
        .van-sidebar-item {
          padding: 15px 12px;
          text-align: center;
          background-color: white;
          border-bottom: 0.06em solid #ebebeb;
        }
        .van-sidebar-item--select {
          background-color: #dedede;
        }
        .van-sidebar-item--select::before {
          position: absolute;
          left: 97%;
          height: 100%;
          background-color: #ffbf05;
        }
      }
    }
    .goods-box {
      width: 70%;
      height: 100%;
      overflow: auto;
      padding-bottom: 160px;
      background-color: white;
      .goods-box-head {
        position: absolute;
        height: 36px;
        width: 100%;
        padding-left: 1em;
        z-index: 1;
        background-color: white;
        line-height: 36px;
        font-weight: 500;
        font-size: 0.9em;
        box-shadow: 0px 1px 3px 0px #ebebeb;
        color: #ffbf05;
      }
      .goods-box-item {
        position: relative;
        width: 100%;
        top: 42px;
        .van-card {
          padding: 6px;
          background-color: white;
          .van-card__title {
            font-size: 1.1em;
            font-weight: 800;
          }
          .old-price {
            position: absolute;
            bottom: 1.5em;
            text-decoration: line-through;
            color: #9e9e9e;
            font-size: 1.1em;
          }
          .van-card__price {
            color: red;
            .van-card__price-integer {
              font-size: 1.2em;
            }
            .van-card__price-currency {
              font-size: 1.2em;
            }
          }
          .van-stepper--round {
            position: absolute;
            bottom: 12px;
            right: 0;
            transform: scale(0.85);
            /deep/ .van-stepper__input {
              width: 24px;
              font-size: 18px;
            }
            /deep/ .van-stepper__minus {
              border: 1.5px solid #3b3b3b;
              color: #3b3b3b;
            }
            /deep/ .van-stepper__plus {
              background-color: #ffbf05;
            }
          }
        }
      }
    }
  }
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>
